<template>
    <view class="page_box">
        <view class="swiper_box">
            <swiper class="swiper" indicator-color="#FFFFFF" indicator-active-color="#FF8722" :indicator-dots="true" :autoplay="true" interval="5000">
                <block v-for="(item, index) in banners" :key="index">
                    <swiper-item>
                        <image :src="item.pic" :data-id="item.specialActivityId" :data-item="item"></image>
                    </swiper-item>
                </block>
            </swiper>
        </view>
        <view class="page_icon_box">
            <view class="icon_box">
                <view class="icon_item" @tap="navigateTo" :data-url="item.url" v-for="(item, index) in iconData" :key="index">
                    <view :class="'icon_img ' + item.class">
                        <image :src="item.icon" mode="" />
                    </view>

                    <text class="icon_title">{{ item.text }}</text>
                </view>
            </view>
            <view class="module_info_box">
                <view class="module_item" v-for="(item, index) in moduleData" :key="index">
                    <view class="info_t">
                        <text>{{ item.title }}</text>
                        <image :src="item.icon" mode="" />
                    </view>

                    <view class="info_b">
                        <text class="name">{{ item.name }}</text>
                        <text class="num">{{ item.num }} ></text>
                    </view>
                </view>
            </view>
        </view>
        <view class="data_info_box">
            <view class="data_t">
                <view class="data_t_l" @tap="showselectorFun">
                    <picker mode="selector" :value="indexs" :data-shop="getShopslist[indexs].shopId" :range-key="'shopName'" :range="getShopslist" @change="bindselectorChange">
                        <view class="pic_box">
                            <text v-if="getShopslist.length">{{ getShopslist[indexs].shopName }}</text>
                            <text v-else>请选择门店</text>
                            <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_show.png" mode="" />
                        </view>
                    </picker>
                    <!-- <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_show.png" mode="" /> -->
                </view>
                <view class="data_t_r" @tap="showTime">
                    <picker mode="date" :value="date" @change="bindDateChange">
                        <view class="pic_box">
                            <view class="picker">
                                <text>{{ date }}</text>
                            </view>
                            <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_date.png" mode="" />
                        </view>
                    </picker>
                </view>
            </view>
            <view class="wxcharts">
                <canvas canvas-id="ringCanvas" style="height: 230px; width: 230px" class="canvas" @touchstart="touchHandler"></canvas>
                <view class="data_info">
                    <view class="data_item">
                        <view class="yesterday"></view>
                        <!-- <text wx:if="{{cashierDatalist.yesterdayAmount}}">昨日收益：{{cashierDatalist.yesterdayAmount}}</text> -->
                        <text v-if="todayAmount">昨日收益：{{ todayAmount }}</text>
                        <text v-else>昨日收益：0.00</text>
                    </view>
                    <view class="data_item">
                        <view class="month"></view>
                        <!-- <text wx:if="{{cashierDatalist.monthAmount}}">本月收益：{{cashierDatalist.monthAmount}}</text> -->
                        <text v-if="monthAmount">本月收益：{{ monthAmount }}</text>
                        <text v-else>本月收益：0.00</text>
                    </view>
                    <view class="data_item">
                        <view class="all"></view>
                        <!-- <text wx:if="{{cashierDatalist.totalAmount}}">累计收益：{{cashierDatalist.totalAmount}}</text> -->
                        <text v-if="cashierDatalist">累计收益：{{ totalAmount }}</text>
                        <text v-else>累计收益：0.00</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp(); // 引入app

const _request = require('../../utils/request.js');

var wxCharts = require('../../utils/wxchart');

var ringChart = null;
export default {
    data() {
        return {
            todayAmount: '',
            monthAmount: '',
            totalAmount: '',

            ringChart: {
                animation: true,
                canvasId: 'ringCanvas',
                type: 'ring',
                extra: {
                    ringWidth: 35,
                    pie: {
                        offsetAngle: -45
                    }
                },
                title: {
                    name: '0',
                    color: '#E94A18',
                    fontSize: 16
                },
                subtitle: {
                    name: '今日收益',
                    color: '#333',
                    fontSize: 12
                },
                series: [
                    {
                        name: '今日收益',
                        data: 0,
                        stroke: false,
                        color: '#E94A18'
                    },
                    {
                        name: '昨日收益',
                        data: 0,
                        stroke: false,
                        color: '#B3D465'
                    },
                    {
                        name: '本月收益',
                        data: 0,
                        stroke: false,
                        color: '#F8B551'
                    },
                    {
                        name: '累计收益',
                        data: 0,
                        stroke: false,
                        color: '#7ECEF4'
                    }
                ],
                disablePieStroke: true,
                width: 230,
                height: 230,
                dataLabel: false,
                legend: false,
                background: '#f5f5f5',
                padding: 0
            },

            cashierDatalist: {},
            getShopslist: [],

            banners: [
                {
                    pic: 'https://yiyueuser.oss-cn-shenzhen.aliyuncs.com/1500648740284276738.jpg'
                },
                {
                    pic: 'https://yiyueuser.oss-cn-shenzhen.aliyuncs.com/1500648698295099393.jpg'
                },
                {
                    pic: 'https://yiyueuser.oss-cn-shenzhen.aliyuncs.com/1500648823121780737.jpg'
                },
                {
                    pic: 'https://yiyueuser.oss-cn-shenzhen.aliyuncs.com/1500648857552822274.jpg'
                }
            ],

            iconData: [
                {
                    text: '开卡售卡',
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_1.png',
                    class: 'icon_1',
                    url: '/pagesc/cardsale/index?type=1'
                },
                {
                    text: '会员充值',
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_2.png',
                    class: 'icon_2',
                    url: '/pagesc/cardsale/index?type=2'
                },
                {
                    text: '收银开单',
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_3.png',
                    class: 'icon_3',
                    url: '/pagesc/ordercashier/ordercashier?type=1'
                },
                {
                    text: '创客开单',
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_4.png',
                    class: 'icon_4',
                    url: '/pagesc/cardsale/index?type=4'
                },
                {
                    text: '挂单列表',
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_5.png',
                    class: 'icon_5',
                    url: '/pagesc/orderlist/orderlist'
                }
            ],

            moduleData: [
                {
                    title: '客户管理',
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_6.png',
                    name: '新客户',
                    num: 0
                },
                {
                    title: '预约管理',
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_7.png',
                    name: '今日预约',
                    num: 0
                },
                {
                    title: '订单中心',
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_8.png',
                    name: '今日订单',
                    num: 0
                },
                {
                    title: '收银单',
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/icon_9.png',
                    name: '今日收据',
                    num: 0
                }
            ],

            array: [
                {
                    pic: '全部',
                    index: 0
                },
                {
                    pic: '一个',
                    index: 1
                }
            ],

            todayAmount: '',
            picker_01_data: '全部',
            isShow_01: false,
            showselector: false,
            date: '',
            dates: '20221101',
            showtime: false,
            indexs: 0,
            shopId: '',
            picker_01_index: '',
            status: '',
            data: '',
            num: '',
            shopName: ''
        };
    },
    options: {
        styleIsolation: 'shared'
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getShops();
        var Today = new Date();
        var Todays = Today.getFullYear() + '-' + (Today.getMonth() + 1) + '-' + Today.getDate();
        this.setData({
            date: Todays
        }); // this.cashierData(shopId)
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady(e) {},
    methods: {
        // 显示时间弹窗
        showTime() {
            console.log('触发');
            this.setData({
                showtime: true
            });
        },

        // 关闭窗口
        onCloseTime() {
            this.setData({
                showtime: false
            });
        },

        navigateTo(e) {
            console.log('e', e);
            const { url } = e.currentTarget.dataset;

            if (!url) {
                uni.showToast({
                    title: '开发中',
                    icon: 'none'
                });
                return;
            }

            uni.navigateTo({
                url: url
            });
        },

        touchHandler: function (e) {
            console.log(ringChart);
            console.log(ringChart.getCurrentDataIndex(e));
        },

        updateData: function () {
            ringChart.updateData({
                title: {
                    name: '80%'
                },
                subtitle: {
                    color: '#ff0000'
                }
            });
        },

        showPicker_01: function () {
            console.log('111');
            this.setData({
                isShow_01: true
            });
        },

        showselectorFun() {
            this.setData({
                showselector: true
            });
        },

        bindDateChange: function (e) {
            console.log('picker发送选择改变，携带值为', e.detail.value);
            let { shopId } = this; // let dates = e.detail.value.split('-').join('')

            let date = e.detail.value;
            this.setData({
                date: date
            });
            this.cashierData(shopId, date);
        },

        bindselectorChange(e) {
            console.log('22，携带值为', e);
            this.setData({
                indexs: e.detail.value
            });
            setTimeout(() => {
                this.setData({
                    shopId: this.getShopslist[this.indexs].shopId
                });
                let shopId = this.getShopslist[this.indexs].shopId;
                let date = this.date;
                console.log('aaaa', shopId);
                uni.setStorageSync('shopId', shopId);
                this.cashierData(shopId, date);
            }, 500); // const {
            //   shopId,
            //   dates
            // } = this.data
        },

        sureCallBack_01(e) {
            console.log('aa', e);
            let data = e.detail;
            this.setData({
                isShow_01: false,
                picker_01_data: e.detail.choosedData[0],
                picker_01_index: JSON.stringify(e.detail.choosedIndexArr),
                status: e.detail.choosedIndexArr[0]
            });
        },

        // 查询当前门店所有分店
        getShops() {
            _request
                .get('/cashier/getShops', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        console.log('1', res);
                        this.setData({
                            getShopslist: res.data.data,
                            shopId: res.data.data[0].shopId
                        });
                        let shopId = res.data.data[0].shopId;
                        uni.setStorageSync('shopId', shopId);
                        let date = this.date; // let dates = this.data.date.split('-').join('')

                        this.cashierData(shopId, date);
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 开单收银界面数据
        cashierData(shopId, date) {
            _request
                .get('/cashier/cashierData', {
                    shopId: shopId,
                    ymd: date
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        if (res.data.data.storeAuth == false) {
                            uni.showModal({
                                title: '提示',
                                content: '您还没有支付认证',
                                success: function (res) {
                                    if (res.confirm) {
                                        console.log('确定');
                                    } else {
                                        console.log('取消');
                                    }
                                }
                            });
                        } // this.setData({
                        //   cashierDatalist: res.data.data,
                        //   todayAmount: res.data.data.todayAmount,
                        //   'ringChart.series[0].data': res.data.data.todayAmount,
                        //   'ringChart.series[1].data': res.data.data.yesterdayAmount,
                        //   'ringChart.series[2].data': res.data.data.monthAmount,
                        //   'ringChart.series[3].data': res.data.data.totalAmount,
                        //   'ringChart.title.name': res.data.data.todayAmount.toString(),
                        //   'moduleData[0].num':res.data.data.newMember,
                        //   'moduleData[1].num':res.data.data.booking,
                        //   'moduleData[2].num':res.data.data.orders,
                        //   'moduleData[3].num':res.data.data.cashiers,
                        // })
                        // ringChart = new wxCharts(this.data.ringChart);
                        // ringChart.addEventListener('renderComplete', () => {
                        //   console.log('renderComplete');
                        // });

                        this.setData({
                            cashierDatalist: res.data.data,
                            todayAmount: Number(res.data.data.todayAmount).toFixed(2),
                            monthAmount: Number(res.data.data.monthAmount).toFixed(2),
                            totalAmount: Number(res.data.data.totalAmount).toFixed(2),
                            'ringChart.series[0].data': Number(res.data.data.todayAmount).toFixed(2),
                            'ringChart.series[1].data': Number(res.data.data.yesterdayAmount).toFixed(2),
                            'ringChart.series[2].data': Number(res.data.data.monthAmount).toFixed(2),
                            'ringChart.series[3].data': Number(res.data.data.totalAmount).toFixed(2),
                            'ringChart.title.name': res.data.data.todayAmount.toString(),
                            'moduleData[0].num': Number(res.data.data.newMember).toFixed(2),
                            'moduleData[1].num': Number(res.data.data.booking).toFixed(2),
                            'moduleData[2].num': Number(res.data.data.orders).toFixed(2),
                            'moduleData[3].num': Number(res.data.data.cashiers).toFixed(2)
                        });
                        ringChart = new wxCharts(this.ringChart);
                        ringChart.addEventListener('renderComplete', () => {
                            console.log('renderComplete');
                        });
                        setTimeout(() => {
                            ringChart.stopAnimation();
                        }, 500);
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
page {
    background: #f1f1f1;
}
.swiper_box {
    width: 100%;
    height: 380rpx;
}
swiper {
    top: 60rpx;
    width: 100%;
    height: 380rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

swiper image {
    width: 100%;
    height: 380rpx;
}
.swiper .wx-swiper-dot {
    margin-bottom: 33rpx;
}
.page_icon_box {
    width: 750rpx;
    height: 697rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    position: relative;
    top: -20rpx;
}
.icon_box {
    display: flex;
    justify-content: space-between;
    padding: 54rpx 30rpx;
}
.icon_item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.icon_img {
    width: 100rpx;
    height: 100rpx;
    background: #ffffff;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon_img image {
    width: 66rpx;
    height: 54rpx;
}
.icon_title {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-top: 30rpx;
}
.icon_1 {
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(31, 130, 249, 0.16);
}
.icon_2 {
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(242, 93, 3, 0.16);
}
.icon_3 {
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(254, 38, 92, 0.16);
}
.icon_4 {
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(31, 130, 249, 0.16);
}
.icon_5 {
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(134, 73, 238, 0.16);
}
.module_info_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;
}
.module_item {
    width: 340rpx;
    height: 160rpx;
    background: #fef8f4;
    margin-top: 25rpx;
    border-radius: 10rpx;
}
.info_t {
    display: flex;
    padding: 12rpx 11rpx 0 30rpx;
    align-items: center;
    justify-content: space-between;
}
.info_t text {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: 400;
    color: #333333;
}
.info_t image {
    width: 68rpx;
    height: 68rpx;
}
.info_b {
    padding: 18rpx 0 0 30rpx;
}
.info_b .name {
    font-size: 28rpx;
    color: #333333;
}
.info_b .num {
    color: rgba(233, 74, 24, 1);
    font-size: 24rpx;
    margin-left: 20rpx;
}
.data_info_box {
    width: 750rpx;
    height: 600rpx;
    background: #ffffff;
    /* margin: 20rpx 0; */
}
.data_t {
    display: flex;
    justify-content: space-around;
    padding-bottom: 31rpx;
    border-bottom: 1rpx solid #e5e5e5;
}
.data_t_l {
    width: 300rpx;
    /* height: 57rpx; */
    background: #ffffff;
    border: 1rpx solid #d2d2d2;
    border-radius: 10rpx;
    padding: 16rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32rpx;
}
.data_t_l text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.data_t_l image {
    width: 20rpx;
    height: 13rpx;
}
.data_t_r {
    width: 300rpx;
    background: #ffffff;
    border: 1rpx solid #d2d2d2;
    border-radius: 10rpx;
    padding: 16rpx 20rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 32rpx;
}
.data_t_r text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.data_t_r image {
    width: 28rpx;
    height: 28rpx;
}
.wxcharts {
    width: 100%;
    height: 400rpx;
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    z-index: 999;
}
.data_item {
    display: flex;
    align-items: center;
    line-height: 80rpx;
}
.data_item text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 15rpx;
}
.yesterday {
    width: 20rpx;
    height: 20rpx;
    background: #b3d465;
    border-radius: 50%;
}
.month {
    width: 20rpx;
    height: 20rpx;
    background: #f8b551;
    border-radius: 50%;
}
.all {
    width: 20rpx;
    height: 20rpx;
    background: #7ecef4;
    border-radius: 50%;
}
.picker {
    z-index: 9999 !important;
}
.cur .picker {
    bottom: 0;
    z-index: 9999 !important;
}
.pic_box {
    width: 300rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
